<template>
	<view class="container">
		<view class="user-name">
			<text>{{data.id}} 号选手 {{data.user_name}}</text>
		</view>
		
		<view class="title">
			<text>正在参加 {{data.title}}</text>
		</view>
		<u-gap height="1" bg-color="#eee"></u-gap>
		<view class="numberBox">
			<view>
				<view class="number">{{data.id}}</view>
				<view class="numberText">编号</view>
			</view>
			<view>
				<view class="number">{{data.vote_count}}</view>
				<view class="numberText">票数</view>
			</view>
			<view>
				<view class="number">{{data.leaderboard}}</view>
				<view class="numberText">排名</view>
			</view>
		</view>
		<u-gap height="1" bg-color="#eee"></u-gap>
		<view class="user-url">
			<swiper
				:style="{height: swiperHeight + 'px'}"
				:indicator-dots="true"
				active-class="swiper-img"
				:autoplay="true"
				:circular="true"
				@change="swiperChange"
			>
				<swiper-item v-for="(item,index) in data.user_url" :key="index">
					<u-lazy-load :image="item.url" threshold="0" :class="[ 'img' + index ]"></u-lazy-load>
				</swiper-item>
			</swiper>
		</view>
		<u-gap height="1" bg-color="#eee"></u-gap>
		<view class="user-desc-title">参赛介绍</view>
		<view class="user-desc">
			{{data.user_desc}}
		</view>
		<u-gap height="1" bg-color="#eee"></u-gap>
		
		<view style="height: 200rpx;">
			
		</view>
		
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="btn-zhuan">
				<u-icon name="zhuanfa" size="50"></u-icon>
			</view>
			<view class="btn-vote">
				<text>给TA投票</text>
			</view>
			<view class="btn-leaderboard">
				<u-icon name="star" size="50"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				data: {},
				swiperHeight: 350,
			};
		},
		onLoad(options) {
			this.id = options.id || 0;
			this.getData();
		},
		methods:{
			getData(){
				
				let data = {
					id: 1,
					title: '这是测试投票',
					user_name: '快投我',
					vote_count: 99,
					leaderboard: 1,
					user_url: [
						{'url': '/static/image/user1.jpeg'},
						{'url': '/static/image/user2.png'},
						{'url': '/static/image/user3.png'},
						{'url': '/static/image/user4.jpeg'},
					],
					user_desc: '我是大美女 ',
				};
				
				this.data = data;
				
				uni.setNavigationBarTitle({
					title: data.id + "号选手 " +data.user_name
				});
				
				setTimeout(()=>{
					this.setSwiperHeight(0);
				},500)
			},
			swiperChange(e){
				let curr = e.detail.current;
				
				this.setSwiperHeight(curr);
			},
			setSwiperHeight(curr){
				let that = this;
				let query = uni.createSelectorQuery();
				query.select(".img"+curr).boundingClientRect()
				query.exec((res) => {
					that.swiperHeight = res[0].height;
				})
			}
		},
	}
</script>

<style lang="scss">
	.container{
		padding: 30rpx;
		
		.user-name{
			text-align: center;
			color: #f96770;
			font-size: 36rpx;
			font-weight: bold;
		}
		.title{
			padding: 30rpx 20rpx;
			text-align: center;
			color: #909399;
			letter-spacing: 4px;
		}
		.numberBox{
			display: flex;
			justify-content: space-between;
			align-content: center;
			text-align: center;
			padding: 30rpx;
			
			.number{
				color: #f96770;
				font-size: 40rpx;
				font-weight: bold;
				padding-bottom: 10rpx;
			}
			
			.numberText{
				color: #909399;
				font-weight: bold;
			}
		}
		
		.user-desc-title{
			color: #f96770;
			text-align: center;
			padding: 20rpx 0;
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.user-desc{
			color: #909399;
			padding-bottom: 20rpx;
		}
		
		.user-url{
			padding: 20rpx;
		}
		
		.page-bottom{
			width: 90%;
			position:fixed;
			bottom: 0;
			left: 5%;
			right: 0;
			z-index: 95;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			
			.btn-zhuan, .btn-leaderboard,.btn-vote{
				background-color: #f96770;
				color: #fff;
				text-align: center;
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 50%;
				margin: 20rpx 20rpx 30rpx 20rpx;
				
				display: flex;
				justify-content: center;
				align-content: center;
			}
			.btn-vote{
				background-image: linear-gradient(#f96770, #fc587d);
				width: 250rpx;
				border-radius: 50rpx;
			}
		}
	}
</style>
